<template>
	<view class="dynamicDetail">
		<!-- #ifdef APP-PLUS -->
		<!-- <u-gap height="30" ></u-gap> -->
		<!-- #endif -->

		<view class="videoBox">
			<video class="video" :src="detailData.videoUrl">
				<cover-image @click="back" class="videoImg videoImg1" src="@/static/img/common/back.png">
				</cover-image>
				<cover-image v-if="detailData.status === 1" @click="handleShare" class="videoImg videoImg2"
					src="@/static/img/common/share.png">
				</cover-image>
			</video>
		</view>
		<view class="content">
			<view class="dynamic-card">
				<view class="dynamic-card-top">
					<view class="dynamic-card-top-1">
						<u-tag color='#fff' :bg-color='getStatus(detailData.status).bgc'
							:text='getStatus(detailData.status).text'>
						</u-tag>
						<view class="card_title">
							{{detailData.title}}
						</view>
					</view>
					<view class="ellipsis2 card-desc">{{detailData.desc}}</view>
				</view>
				<view class="dynamic-card-bottom">
					<view class="card-time">{{detailData.createTime}}</view>
					<view class="dynamic-card-bottom-2">
						<image src="@/static/img/common/point.png" mode="widthFix" @click="handleMore" class="moreImg">
						</image>
					</view>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view class="popup-content" v-if="!tip">
				<view class="common-msg-title">
					<view class="common-msg-title-l">
						<image src="@/static/img/common/line.png" alt="" class="img"></image>
						<text>评论({{ total || 0}}) </text>
					</view>
					<view class="common-msg-title-r">
						<text @click="getData(1)" :class="{active: filterCondition===1}">按推荐</text>
						<text class="grap">|</text>
						<text @click="getData(2)" :class="{active: filterCondition===2}">按时间</text>
					</view>
				</view>
				<scroll-view scroll-y="true" class="scrollHeight">
					<view class="comments-row" v-for="(dynamicData,index) in dynamicApplyList" :key="index">
						<view class="comments-peo">
							<u-avatar :src="dynamicData.createByFace ? dynamicData.createByFace : ''" size="68"
								class="header-img"></u-avatar>
							<view class="name-date">
								<text class="name">{{dynamicData.createByName || '--'}}</text>
								<text
									class="date">{{dynamicData.createTime ? dynamicData.createTime.split(" ")[0] : '--'}}</text>
							</view>
							<view class="praise">
								<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
								<text>{{dynamicData.likes || 0}}</text>
							</view>
						</view>
						<view class="comments-text">
							<text @click.stop="handleComment(dynamicData,index)">{{ dynamicData.details || '--'}}</text>
						</view>
						<view class="applyAll" v-if="dynamicData.applyList&&dynamicData.applyList.length > 0">
							<view class="comments-row" v-for="(val,i) in dynamicData.applyList" 
							:key="val.id+i">
								<view class="comments-peo">
									<u-avatar :src="val.createByFace || ''" size="68" class="header-img">
									</u-avatar>
									<view class="name-date">
										<text class="name">{{val.createByName || '--'}}</text>
										<text
											class="date">{{val.createTime ? val.createTime.split(" ")[0] : '--'}}</text>
									</view>
									<view class="praise">
										<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
										<text>{{val.likes || 0}}</text>
									</view>
								</view>
								<view class="comments-text">
									<text v-if="val.pid !== 1">回复 <text
											class="apply-obj">{{ val.beReplied || '回复的对象'}}</text>
									</text>
									<text @click.stop="handleComment(val,index)">{{ val.details || '--'}}</text>
								</view>
							</view>
							<view v-if="dynamicData.applyList" v-show='dynamicData.total > dynamicData.applyList.length'
								@click="handleShowAll(index)" class="showAllApply">查看更多回复
							</view>
						</view>
					</view>
					<u-gap height="40" v-show="!isMore" bg-color="#fff"></u-gap>
					<view @click="getMoreFirst" :style="{color: isMore?'#000':'#dedede'}" style="text-align: center;">
						{{showMoreMsg}}
					</view>
				<u-gap height="80" v-show="applyWho" bg-color="#fff"></u-gap>
				</scroll-view>
			</view>
			<view class="tips" v-else>
				{{tip}}
			</view>
			<!-- 评论 -->
			<view class="inputBox" v-if="!tip">
					<view v-show='applyWho' class="applyWho">回复： {{applyWho}}</view>
					<view class="applyBox">
						<input
						@confirm='handleApply'
						@blur="handleResetApplyInput"
						:focus='applyInputFocus'
						 class="ipt" v-model="applyInputText" type="text" ref="inputRef" placeholder="说点什么..." confirm-type='done'>
						<view class="inputImgBox">
							<view class="imgAndText">
								<image src="@/static/img/common/comments.png" mode="" class="inputBoxImg"></image>
								<text>{{detailData.commentsNum}}</text>
							</view>
							<view class="imgAndText">
								<image src="@/static/img/common/collect.png" mode="" class="inputBoxImg"></image>
								<text>{{detailData.collectNum}}</text>
							</view>
							<view class="imgAndText">
								<image src="@/static/img/common/praise2.png" mode="" class="inputBoxImg"></image>
								<text>{{detailData.likeNum}}</text>
							</view>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		API
	} from '@/config/myApi.js'
	export default {
		computed: {
			tip() {
				let msg = ''
				switch (this.detailData.status) {
					case 4:
						msg = '审核不通过理由：'+this.detailData.remarks
						break;
					case 2:
						msg = '涉及敏感词，等待管理员审核'
						break;
					default:
						msg = ''
				}
				return msg

			}
		},
		data() {
			return {
				filterCondition: 1,
				detailData: {},
				dynamicApplyList: [
					// {
					// 	id: 'sfaa',
					// 	createByFace: '',
					// 	createByName: 'c**执着2',
					// 	createTime: '2022-10-09',
					// 	likes: '12',
					// 	details: '随便来点话随便来点话随便来点话随便来点话随便来点话随便来点话随便来点话随便来点话',
					// 	applyList: [],
					// }
				],

				statusList: [{
						status: -1,
						bgc: '#dedede',
						text: '草稿'
					},
					{
						status: 4,
						bgc: '#F5454E',
						text: '未通过'
					},
					{
						status: 3,
						bgc: '#35B572',
						text: '已通过'
					},
					{
						status: 1,
						bgc: '#35B572',
						text: '已通过'
					},
					{
						status: 2,
						bgc: '#FFA341',
						text: '待审核'
					},


				],
				id: '',
				commentParams: {
					pageNumber: 1,
					pageSize: 10
				},
				applyInputText:'',
				total: 0,
				isMore: false,
				showMoreMsg: '查看更多',
				applyWho: '',
				applyParams: {
					pid: '',
					commentType: 0
				},
				applyInputFocus: false,
				currentApplyParentIndex: null
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getInfo()
			this.getFirstData()
		},

		methods: {
			// 一级评论
			// handleComment 评论 commentType 0 一级 1 二级 ; pid 一级pid
			handleComment(parent,index) {
				this.applyInputFocus = false
				this.currentApplyParentIndex = index
				this.applyParams = {
					pid: parent.id,
					commentType: 1
				}
					this.applyWho = parent.createByName
				// if(parent.beReplied) {
				// 	this.applyWho = parent.beReplied
				// } else {
				// 	this.applyWho = '用户'
				// }
				setTimeout(()=> {
					this.applyInputFocus = true
				})
			},
			// 确认
			handleApply() {
				// console.log(this.applyParams)
				const commentType = this.applyParams.commentType
				const currentApplyParentIndex = this.currentApplyParentIndex
				
				// return
				console.log(this.applyParams)
				uni.showLoading({
					title:'加载中...'
				})
				API.addCommentDynamic({
					...this.applyParams,
					details:this.applyInputText,
					dynamicId: this.id
				}).then(res => {
					if(res.code === 200) {
						// 如果是二级评论，那就只更新二级
						if(commentType === 1) {
							this.handleShowAll(currentApplyParentIndex,true)
						} else {
						// 一级评论就更新一级评论
							this.getFirstData('refresh')
						}
						
					}
				})
			},
			handleResetApplyInput () {
				this.applyParams = {
					pid: '',
					commentType: 0
				}
				this.applyInputText = ''
				this.applyWho = ''
				this.currentApplyParentIndex = null
			},
			handleShare() {
				console.log('share')
			},
			back() {
				uni.navigateBack()
			},
			// 获取基本信息
			getInfo() {
				API.getDynamicById(this.id)
					.then(res => {
						if (res.code === 200) {
							this.detailData = res.result
						}
					})
			},
			// 获取更多 一级评论
			getMoreFirst() {
				if (this.isMore) {
					this.commentParams.pageNumber++
					this.getFirstData()
				}
			},
			// 请求数据
			getData(type) {
				this.dynamicApplyList = []
				this.commentParams.pageNumber = 1
				if (type === 1) {
					// 按推荐请求数据
					this.filterCondition = 1
				}
				if (type === 2) {
					// 按时间请求数据
					this.filterCondition = 2
				}
				this.getFirstData()
			},
			// 获取一级评论
			getFirstData(refresh) {
				this.showMoreMsg = '加载中...'
				const params = refresh ? {
					pageNumber: 1,
					pageSize: this.dynamicApplyList.length+1
				}: this.commentParams;
				API.getDynamicCommentById({
					dynamicId: this.id,
					firstId:0,
					...params,
					sort: this.filterCondition === 1 ? 'likes' : 'create_time'
				}).then(res => {
					if (res.code === 200) {
						if(refresh) {
							this.dynamicApplyList = res.result.records
						}else {
							this.dynamicApplyList = [...this.dynamicApplyList, ...res.result.records]
						}
						
						// 请求二级评论
						this.dynamicApplyList.forEach(async (it, index) => {
							if (!it.applyList) {
								try {
									const res1 = await this.getDataByFirst(it.id)
									it.pageNumber = 1
									it.total = parseInt(res1.total)
									this.$set(this.dynamicApplyList[index], 'applyList', res1.records)
								} catch (err) {
									it.pageNumber = 1
									it.total = 0
									this.$set(this.dynamicApplyList[index], 'applyList', [])
								}

							}
						})
						this.total = res.result.total
						if (parseInt(res.result.total) > this.dynamicApplyList.length) {
							this.isMore = true
							this.showMoreMsg = '加载更多'
						} else {
							this.isMore = false
							this.showMoreMsg = '没有更多了...'
						}
					}
				})
			},
			// 获取二级评论
			async getDataByFirst(firstId, pageNumber = 1,pageSize=10) {
				const res = await API.getDynamicCommentById({
					firstId: firstId,
					dynamicId: this.id,
					pageNumber,
					pageSize,
					sort: this.filterCondition === 1 ? 'likes' : 'create_time'
				})
				if (res.code !== 200) {
					uni.showToast({
						title: res.message
					})
				}
				return res.result
			},
			getStatus(status) {
				return this.statusList.find(item => item.status === status) || this.statusList[0]
			},
			// 查看更多回复
			async handleShowAll(index,refresh) {
				// 获取当前点击的第几位一级评论
				const obj = this.dynamicApplyList[index]
				const applyList = obj.applyList
				// 获取当前加载的二级评论的页数
				const pageNumber = obj.pageNumber + 1
				let res = null
				if(refresh) {
					res= await this.getDataByFirst(obj.id, 1,applyList.length+1)
					this.$set(this.dynamicApplyList[index], 'applyList', [...res.records])
				} else {
					res= await this.getDataByFirst(obj.id, pageNumber)
					this.$set(this.dynamicApplyList[index], 'applyList', [...applyList, ...res.records])
				}
				
				
				this.$set(this.dynamicApplyList[index], 'pageNumber', pageNumber)
				this.$set(this.dynamicApplyList[index], 'total', parseInt(res.total))
			},
			// 更多操作
			handleMore() {
				const arr = [{
					text: '删除',
					code: 0
				}
				]
				// 如果不通过，那就去修改重新发布
				if(this.detailData.status === 4) {
					arr.unshift({
						text:'修改',
						code: 1
					})
				}
				uni.showActionSheet({
					itemList: arr.map(it => it.text),
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						// 删除
						if (arr[res.tapIndex].code === 0) {
							API.delDynamicById(this.id)
								.then(res => {
									if (res.code === 200) {
										uni.showToast({
											title: '删除成功',
											success() {
												setTimeout(() => {
													uni.navigateBack()
												}, 1000)
											}
										})
									}
								})
						}
						// 修改
						if(arr[res.tapIndex].code === 1) {
							uni.navigateTo({
								url:'/pages/mine/dynamic/publishDynamic?id='+this.detailData.id,
							})
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.scrollHeight {
		height: calc(100vh - 800rpx);
	}

	.tips {
		margin-top: 140rpx;
		color: #999999;
		text-align: center;
	}

	.inputBox {
		display: flex;
		// align-items: center;
		flex-direction: column;
		justify-content: center;
		// height: 160rpx;
		padding: 20rpx 0;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		width: 100%;
		.ipt {
			width: 450rpx;
			background-color: #F3F3F3;
			height: 60rpx;
			border-radius: 40rpx;
			padding-left: 30rpx;
		}

		.ipt::placeholder {
			color: #B8B7B7;
		}
		.applyWho {
			color: #B8B7B7;
			padding: 10rpx;
		}
		.applyBox {
			display: flex;
			// flex-direction: column;
			
		}
		.inputImgBox {
			display: flex;
			align-items: center;

			.imgAndText {
				margin: 0 10rpx;
				display: flex;
				align-items: center;

				text {
					color: #9D9D9D;
					font-size: 24rpx;
					margin-left: 6rpx;
				}
			}

			.inputBoxImg {
				width: 30rpx;
				height: 30rpx;
			}
		}

	}

	.dynamicDetail {
		background-color: #fff;
		min-height: 100vh;
	}

	.common-msg-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-between;

		.common-msg-title-r {
			.active {
				color: #000;
			}

			.grap {
				margin: 0 20rpx;
			}

			font-size: 28rpx;
			color: #666666;
		}

		.common-msg-title-l {
			.img {
				width: 5rpx;
				height: 28rpx;
			}

			>text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 10rpx;
			}
		}

	}

	.videoBox {
		width: 100%;
		position: relative;

		.video {
			width: 100%
		}

		.videoImg {
			position: absolute;
			/*#ifdef APP-PLUS */
			top: var(--status-bar-height);
			/* #endif */
			/* #ifdef H5 */
			top: 20rpx;
			/* #endif */
			text-align: center;
			z-index: 99;
		}

		.videoImg1 {
			left: 28rpx;
			width: 19rpx;
			height: 34rpx;
		}

		.videoImg2 {
			// border-radius: 50%;
			line-height: 35rpx;
			height: 35rpx;
			width: 35rpx;
			right: 20px;
		}
	}

	.content {
		padding: 30rpx;
	}

	.dynamic-card {
		background-color: #fff;
		border-radius: 28rpx;

		width: 100%;
	}

	.dynamic-card-top {
		.dynamic-card-top-1 {
			display: flex;
		}

		.card-desc {
			color: #666666;
			margin-bottom: 6rpx;
		}

		.u-tag {
			border: none;
			margin-right: 10rpx;
			margin-bottom: 6rpx;
			font-size: 26rpx;
		}

		.card_title {
			font-size: 36rpx;
			color: #000;
		}
	}

	.dynamic-card-bottom {
		display: flex;
		justify-content: space-between;
		color: #9D9D9D;

		.card-time {
			font-size: 26rpx;
		}

		.dynamic-card-bottom-2 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.moreImg {
				width: 35rpx;
			}
		}
	}

	.showAllApply {
		color: #2F7DE7;
		font-size: 24rpx;
		text-align: right;
	}

	.popup-content {
		height: inherit;

		.comments-row {
			border: none;

			.praise {
				display: flex;
				align-items: center;

				>.img {
					width: 20rpx;
					height: 20rpx;
				}

				>text {
					font-size: 20rpx;
					color: #9D9D9D;
					margin-left: 6rpx;
				}
			}

			.applyAll {
				margin-top: 30rpx;
				padding: 0 30rpx 30rpx;
				background-color: #f6f3f7;

				.all-reply-text {
					width: 100%;
					margin: 30rpx 0;
					font-size: 24rpx;
					color: #5183d7;
					text-align: right;
				}
			}
		}

	}

	// 评论样式-共用
	.comments-row {
		padding: 37rpx 0rpx 22rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		flex-direction: column;

		&:last-child {
			border: none;
		}

		.comments-peo {
			display: flex;

			.header-img {
				width: 72rpx;
				height: 72rpx;
			}

			.name-date {
				margin-left: 19rpx;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				>text {
					display: block;
				}

				.name {
					font-size: 28rpx;
					color: #333333;
				}

				.date {
					font-size: 20rpx;
					color: #979497;
				}
			}

			.evaluation {
				display: flex;
				align-items: center;
				margin-left: auto;

				>text {
					margin-right: 8rpx;
					font-size: 20rpx;
					color: #333333;
				}

				>img {
					width: 21rpx;
					height: 21rpx;
					margin-left: 4rpx;
				}

			}
		}

		.comments-text {
			font-size: 26rpx;
			color: #333333;
			margin-top: 36rpx;
			line-height: 40rpx;

			.apply-obj {
				color: #c2c2c2;
				padding: 0 20rpx;
			}
		}

		.comments-msg {
			display: flex;
			margin-left: auto;
			margin-top: 30rpx;

			.msg,
			.praise {
				display: flex;
				align-items: center;

				>.img {
					width: 20rpx;
					height: 20rpx;
				}

				>text {
					font-size: 20rpx;
					color: #9D9D9D;
					margin-left: 6rpx;
				}
			}

			.praise {
				margin-left: 20rpx;
			}
		}
	}
</style>
